<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="姓名/单位名称">
              <j-input placeholder="请输入姓名/单位名称" v-model="queryParam.name"></j-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="身份证号/信用代码">
              <a-input placeholder="请输入身份证号/信用代码" v-model="queryParam.code"></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="联系电话">
                <a-input placeholder="请输入联系电话" v-model="queryParam.phone"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <!--              <a-form-item label="客户类型：1个人客户，2企业客户">-->
              <!--                <a-input placeholder="请输入客户类型：1个人客户，2企业客户" v-model="queryParam.type"></a-input>-->
              <!--              </a-form-item>-->
              <a-form-item label="客户类型">

                <j-dict-select-tag placeholder="请选择客户类型" v-model="queryParam.type" dictCode="customer_type" />
                <!--                <a-select v-model="queryParam.type" placeholder="请选择客户类型">-->
                <!--                  <a-select-option value="">请选择</a-select-option>-->
                <!--                  <a-select-option value="1">个人客户</a-select-option>-->
                <!--                  <a-select-option value="2">企业客户</a-select-option>-->
                <!--                </a-select>-->
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
              <a @click="handleToggleSearch" style="margin-left: 8px">
                {{ toggleSearchStatus ? '收起' : '展开' }}
                <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
              </a>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button v-has="'customerInfo:add'" @click="handleAdd" type="primary" icon="plus">新增</a-button>
      <a-button v-has="'customerInfo:export'" type="primary" icon="download" @click="handleExportXls('客户管理')">导出
      </a-button>
      <a-upload v-has="'customerInfo:import'" name="file" :showUploadList="false" :multiple="false"
                :headers="tokenHeader" :action="importExcelUrl"
                @change="handleImportExcel">
        <a-button type="primary" icon="import">导入</a-button>
      </a-upload>
      <a-button v-has="'customerInfo:temp'" type="primary" icon="download" @click="handleExportXlsTemplate('客户管理模板')">
        模板下载
      </a-button>
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item v-has="'customerInfo:delete'" key="1" @click="batchDel">
            <a-icon type="delete" />
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>

    <!-- table区域-begin -->
    <div>
      <!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
      <!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{-->
      <!--        selectedRowKeys.length }}</a>项-->
      <!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
      <!--      </div>-->


      <a-table
        v-if="isGroup == 1"
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{  y: screenHeight }"
        class="j-table-force-wrap"
        @change="handleTableChange"
        :expandedRowKeys="expandedRowKeys"
        @expand="handleExpand">
        <!--     x: 2000,   :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;" />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <div slot="filterDropdown">
          <a-card>
            <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
              <a-row>
                <template v-for="(item,index) in defColumns">
                  <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                    <a-col :span="8">
                      <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
                    </a-col>
                  </template>
                </template>
              </a-row>
            </a-checkbox-group>
          </a-card>
        </div>
        <a-icon slot="filterIcon" type='setting' :style="{ fontSize:'16px',color:  '#108ee9' }" />

        <span slot="action" slot-scope="text, record">
                <a v-has="'customerInfo:edit'" @click="handleEdit(record)">编辑</a>
                <a-divider v-has="'customerInfo:edit'" type="vertical" />

                <a v-has="'customerInfo:look'" @click="handleDetail(record)">查看</a>
                <a-divider v-has="'customerInfo:look'" type="vertical" />

                <a-dropdown>
                  <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
                  <a-menu slot="overlay">
                    <a-menu-item v-has="'customerInfo:updateBalanceInfo'">
                      <a @click="updateBalanceInfo(record)">余额变动详情</a>
                    </a-menu-item>
                    <a-menu-item v-has="'customerInfo:updateBalance'">
                      <a @click="updateBalance(record)">修改余额</a>
                    </a-menu-item>
                    <a-menu-item v-has="'customerInfo:prestore'">
                      <a @click="prestore(record)">预存</a>
                    </a-menu-item>
                    <a-menu-item v-has="'customerInfo:delete'">
                      <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                        <a>删除</a>
                      </a-popconfirm>
                    </a-menu-item>
                  </a-menu>
                </a-dropdown>
              </span>


        <a-table
          slot="expandedRowRender"
          slot-scope="text"
          ref="table1"
          size="middle"
          bordered
          rowKey="id"
          :columns="innerColumns"
          :dataSource="innerData"
          :pagination="false"
          :loading="loading1"
          :scroll="{y: 300}"
          class="j-table-force-wrap"
          @change="handleTableChange">


          <!--        <span slot="action1" slot-scope="text, record">-->
          <!--          <a @click="updateBalance(record)">金额确认</a>-->
          <!--        </span>-->

        </a-table>

      </a-table>


      <a-table
        v-else
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{y: screenHeight }"
        class="j-table-force-wrap"
        @change="handleTableChange">
        <!--        x: 2000,  :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"-->

        <template slot="htmlSlot" slot-scope="text">
          <div v-html="text"></div>
        </template>
        <template slot="imgSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
          <img v-else :src="getImgView(text)" height="25px" alt=""
               style="max-width:80px;font-size: 12px;font-style: italic;" />
        </template>
        <template slot="fileSlot" slot-scope="text">
          <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
          <a-button
            v-else
            :ghost="true"
            type="primary"
            icon="download"
            size="small"
            @click="uploadFile(text)">
            下载
          </a-button>
        </template>

        <div slot="filterDropdown">
          <a-card>
            <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
              <a-row>
                <template v-for="(item,index) in defColumns">
                  <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                    <a-col :span="8">
                      <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
                    </a-col>
                  </template>
                </template>
              </a-row>
            </a-checkbox-group>
          </a-card>
        </div>
        <a-icon slot="filterIcon" type='setting' :style="{ fontSize:'16px',color:  '#108ee9' }" />

        <span slot="action" slot-scope="text, record">
          <a v-has="'customerInfo:edit'" @click="handleEdit(record)">编辑</a>
          <a-divider v-has="'customerInfo:edit'" type="vertical" />

          <a v-has="'customerInfo:look'" @click="handleDetail(record)">查看</a>
          <a-divider v-has="'customerInfo:look'" type="vertical" />

          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item v-has="'customerInfo:updateBalance'">
                <a @click="updateBalance(record)">修改余额</a>
              </a-menu-item>
              <a-menu-item v-if="isApproval == 1" v-has="'customerInfo:updateBalance'">
                <a @click="processCreate(record, '退预存款', 1)">退预存款审批</a>
              </a-menu-item>
              <a-menu-item v-has="'customerInfo:prestore'">
                <a @click="prestore(record)">预存</a>
              </a-menu-item>
              <a-menu-item v-has="'customerInfo:delete'">
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>

      </a-table>
    </div>

    <customerInfo-modal ref="modalForm" @ok="modalFormOk"></customerInfo-modal>
    <updateCustomerBalance-modal ref="updateCustomerBalanceForm" @ok="modalFormOk"></updateCustomerBalance-modal>
    <updateCustomerBalanceInfo-modal ref="updateCustomerBalanceInfoForm" @ok="modalFormOk"></updateCustomerBalanceInfo-modal>
    <updateCustomerPrestore-modal ref="updateCustomerPrestoreForm" @ok="modalFormOk"></updateCustomerPrestore-modal>


    <!--流程表单-->
    <a-modal :title="lcModa.title" v-model="lcModa.visible" :footer="null" :maskClosable="false" width="80%">
      <component :disabled="lcModa.disabled" v-if="lcModa.visible" :is="lcModa.formComponent"
                 :processData="lcModa.processData" :isNew="lcModa.isNew"
                 @afterSubmit="processFormOk" @close="lcModa.visible=false, lcModa.disabled = false"></component>
    </a-modal>

  </a-card>
</template>

<script>

import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'
import { getAction } from '@api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import CustomerInfoModal from './modules/CustomerInfoModal'
import JInput from '@/components/jeecg/JInput'
import JDictSelectTag from '@/components/dict/JDictSelectTag'
import UpdateCustomerBalanceModal from './modules/UpdateCustomerBalanceModal'
import UpdateCustomerBalanceInfoModal from './modules/UpdateCustomerBalanceInfoModal'
import Vue from 'vue'
import UpdateCustomerPrestoreModal from '@views/zcgl/modules/UpdateCustomerPrestoreModal'
import { activitiMixin } from '@views/activiti/mixins/activitiMixin'

export default {
  name: 'CustomerInfoList',
  mixins: [activitiMixin, JeecgListMixin, mixinDevice],
  components: {
    JInput,
    JDictSelectTag,
    UpdateCustomerBalanceModal,
    UpdateCustomerBalanceInfoModal,
    UpdateCustomerPrestoreModal,
    CustomerInfoModal
  },
  props: {
    value: {
      type: [String, Number],
      default: 0,
      desc: '数值'
    },
    symbol: {
      type: String,
      default: '',
      desc: '货币标识符'
    },
    decimal: {
      type: Number,
      default: 2,
      desc: '小数位'
    }
  },
  data () {
    return {
      description: '客户管理管理页面',
      //表头
      columns: [],
      loading1: false,
      expandedRowKeys: [],
      innerColumns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        // {
        //   title: '余额',
        //   align: 'center',
        //   dataIndex: 'balance',
        //   width: 100,
        //   customRender: function (text) {
        //     if (!text) {
        //       text = 0
        //     }
        //     let b = text.toLocaleString('zh-Hans-CN', { style: 'currency', currency: 'CNY' })
        //           return b
        //     }
        //   },
                  {
                    title: '所属公司',
                    align: 'center',
                    dataIndex: 'companyId_dictText'
                  },
                  {
                    title: '更新日期',
                    align: 'center',
                    dataIndex: 'updateTime',
                    customRender: function (text) {
                    return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
                  }
                  }
                  // {
                    //   title: '备注',
                    //   align: 'center',
                    //   dataIndex: 'remark'
                    // },
                    // {
                    //   title: '操作',
                    //   dataIndex: 'action1',
                    //   align: 'center',
                    //   scopedSlots: { customRender: 'action1' }
                    // }
                    ],
                    innerData: [],
                    //列设置
                    settingColumns: [],
                    //列定义
                    defColumns: [
                  {
                    title: '序号',
                    dataIndex: '',
                    key: 'rowIndex',
                    width: 60,
                    // fixed: "left",
                    align: 'center',
                    customRender: (text, record, index) =>
                    `${(this.ipagination.current - 1) * this.ipagination.pageSize + index + 1}`
                  },
                  {
                    title: '客户类型',
                    align: 'center',
                    dataIndex: 'type_dictText'
                  },
                  {
                    title: '姓名/单位名称',
                    align: 'center',
                    dataIndex: 'name'
                  },
                  // {
                  //   title: '余额',
                  //   align: 'center',
                  //   dataIndex: 'totalBalance',
                  //   customRender: function (text) {
                  //     if (!text) {
                  //     text = 0
                  //     }
                  //     let a = text.toLocaleString('zh-Hans-CN', {style: 'currency', currency: 'CNY'})
                  //     if (Number.parseFloat(text) < 0) {
                  //     return ( < label
                  //     style = "color: red;" > {a} < /label>)
                  //     }
                  //     return a
                  //   }
                  //  },
                    {
                      title: '联系地址/单位地址',
                      align: 'center',
                      dataIndex: 'contactAddress'
                    },
                    {
                      title: '身份证号/信用代码',
                      width: 170,
                      align: 'center',
                      dataIndex: 'code'
                    },
                    {
                      title: '联系电话',
                      align: 'center',
                      width: 110,
                      dataIndex: 'phone'
                    },
                    {
                      title: '法人',
                      align: 'center',
                      dataIndex: 'legalPerson'
                    },
                    {
                      title: '法人联系电话',
                      align: 'center',
                      dataIndex: 'legalPersonPhone'
                    },
                    {
                      title: '法人身份证号码',
                      align: 'center',
                      dataIndex: 'legalPersonIdCard'
                    },
                    {
                      title: '家庭住址',
                      align: 'center',
                      dataIndex: 'homeAddress'
                    },
                    {
                      title: '紧急联系人',
                      align: 'center',
                      dataIndex: 'emergencyContact'
                    },
                    {
                      title: '紧急联系人关系',
                      align: 'center',
                      dataIndex: 'emergencyContactRelation_dictText'
                    },
                    {
                      title: '紧急联系人电话',
                      align: 'center',
                      dataIndex: 'emergencyContactPhone'
                    },
                    {
                      title: '邮箱地址',
                      align: 'center',
                      dataIndex: 'emailAddress'
                    },
                    // {
                      //   title: '联系人',
                      //   align: 'center',
                      //   dataIndex: 'contactPerson'
                      // },
                      {
                        title: '备注',
                        align: 'center',
                        dataIndex: 'remark'
                      },
                      // {
                      //   title: '更新人',
                      //   align: 'center',
                      //   dataIndex: 'updateBy'
                      // },
                      // {
                      //   title: '更新日期',
                      //   align: 'center',
                      //   dataIndex: 'updateTime',
                      //   customRender: function (text) {
                      //     return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
                      //   }
                      // },
                      // {
                      //   title: '创建人',
                      //   align: 'center',
                      //   dataIndex: 'createBy'
                      // },
                      // {
                      //   title: '创建日期',
                      //   align: 'center',
                      //   dataIndex: 'createTime',
                      //   customRender: function (text) {
                      //     return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
                      //   }
                      // },
                    {
                      title: '操作',
                      dataIndex: 'action',
                      align: 'center',
                      // fixed: 'right',
                      width: 170,
                      scopedSlots: {
                      filterDropdown: 'filterDropdown',
                      filterIcon: 'filterIcon',
                      customRender: 'action'
                    }
                    }
                      ],
                      url: {
                      list: '/zcgl/customerInfo/list',
                      delete: '/zcgl/customerInfo/delete',
                      deleteBatch: '/zcgl/customerInfo/deleteBatch',
                      exportXlsUrl: '/zcgl/customerInfo/exportXls',
                      importExcelUrl: 'zcgl/customerInfo/importExcel',
                      exportXlsTemplate: 'zcgl/customerInfo/exportXlsTemplate',
                      detailsList: '/zcgl/customerBalance/list'
                    },
                      dictOptions: {}
                    }
                    },
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    initDictConfig () {
      this.initColumns()
    },
    updateBalance (record) {
      this.$refs.updateCustomerBalanceForm.show(record)
    },
    updateBalanceInfo (record) {
      this.$refs.updateCustomerBalanceInfoForm.show(record)
    },
    prestore (record) {
      this.$refs.updateCustomerPrestoreForm.show(record)
    },
    handleExpand (expanded, record) {
      this.expandedRowKeys = []
      this.innerData = []
      if (expanded === true) {
        this.loading1 = true
        this.expandedRowKeys.push(record.id)
        // let detailsParams = this.getQueryParams()//查询条件

        let detailsParams = {}//查询条件
        detailsParams.customerId = record.id
        getAction(this.url.detailsList, detailsParams).then((res) => {
          if (res.success) {
            this.innerData = res.result
          }
        }).finally(() => {
          this.loading1 = false
        })
      }
    },
    //列设置更改事件
    onColSettingsChange (checkedValues) {
      let key = this.$route.name + ':colsettings'
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues
      const cols = this.defColumns.filter(item => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns = cols
    },
    initColumns () {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      // this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

      let key = this.$route.name + ':colsettings'
      let colSettings = Vue.ls.get(key)
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = []
        this.defColumns.forEach(function (item, i, array) {
          allSettingColumns.push(item.dataIndex)
        })
        this.settingColumns = allSettingColumns
        this.columns = this.defColumns
      } else {
        this.settingColumns = colSettings
        const cols = this.defColumns.filter(item => {
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true
          }
          if (colSettings.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        this.columns = cols
      }
    },
    processCreate (r, title, type) {
      let routeName = '@/views/activiti/form/CustomerBalanceRefund'
      let tableData = {
        routeName: routeName,
        tableName: 'zcgl_customer_info',
        tableId: r.id
      }
      this.processCreateCom(tableData, '发起客户' + title + '流程', r.processStatus)
      //   } else {
      //     this.$message.warning(res.message)
      //   }
      // }).finally(() => {
      //   // this.confirmLoading = false
      // })
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>